<template>
  <van-field
    v-model="item.value"
    :label="titleText(options, item)"
    :name="item.itemTitle"
    :placeholder="'点击选择'"
    :required="item.isRequired === 'Y'"
    :rules="[{ required: item.isRequired === 'Y', message: '请选择' }]"
    is-link
    label-width="33rem"
    readonly
    @click="openPop"
  >
    <template #label>
      <span>{{ titleText(options, item) }}</span>
      <p v-if="options.showDesc" class="desc f12 ml30">
        {{ options.description }}
      </p>
    </template>
  </van-field>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :columns="columns"
      :columns-field-names="customFieldName"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
    <!--<Cascader :title="'请选择'+item.itemTitle" :options="columns" :field-names="customFieldName"-->
    <!--  @close="showPicker = false" @finish="onConfirm" />-->
  </van-popup>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import { ref, } from "vue";

//defineOptions({ name: "H5Cascader" });

const { item, type } = defineProps(["item", "type"]);
const emits = defineEmits(["change"]);

const showPicker = ref(false);
const { options } = JSON.parse(item.vformJson);
const dropDownListOption = item.dropDownListOption
  ? JSON.parse(item.dropDownListOption).optionItems
  : [];
const columns = dropDownListOption;
const customFieldName = { text: "label", value: "label", children: "children" };
// 传递值改变后
const onChange = () => emits("change", item);
// 确认选择
const onConfirm = ({ selectedOptions }) => {
  item.value = selectedOptions
    .filter((label) => !!label)
    .map((option) => option.label)
    .join("/");
  item.list = selectedOptions
    .filter((label) => !!label)
    .map((option) => option.label);
  showPicker.value = false;
  onChange();
};
// 点击去选择
const openPop = () => {
  showPicker.value = type !== "view";
};
</script>